<!-- 课程介绍 -->
<template>
  <view class="px-4 py-4">
    <view class="item-style flex relative">
      <view class="label-style flex-shrink-0">线下课程</view>
      <u-image :src="state.data?.cover_image" width="240" height="160" border-radius="12" />
      <view class="flex-1 flex flex-col justify-between ml-3">
        <view class="c-#333 text-28">{{ state.data?.title || '' }}</view>
        <view class="c-#FF513A text-40">￥{{ numFormat(state.data?.price || 0) }}</view>
      </view>
    </view>
    <u-line margin="20rpx 0"></u-line>
    <view class="form-style">
      <view class="flex items-center">
        <text class="c-#ff513a text-28">*</text>
        <view class="w-84 ml-2 mr-10 c-#333 text-28">联系人</view>
        <u-input v-model="state.formData.contact" placeholder="请输入联系人姓名" />
      </view>
      <u-line></u-line>
      <view class="flex items-center mt-2">
        <text class="c-#ff513a text-28">*</text>
        <view class="w-84 ml-2 mr-10 c-#333 text-28">公司</view>
        <u-input v-model="state.formData.company_name" placeholder="请输入公司名" />
      </view>
      <u-line></u-line>
      <view class="flex items-center mt-2">
        <text class="c-#ff513a text-28">*</text>
        <view class="w-84 ml-2 mr-10 c-#333 text-28">手机号</view>
        <u-input v-model="state.formData.mobile" placeholder="请输入手机号" type="number" />
      </view>
      <u-line></u-line>
      <view class="flex items-center mt-2">
        <text class="c-#ff513a text-28">*</text>
        <view class="w-84 ml-2 mr-10 c-#333 text-28">人数</view>
        <u-input v-model="state.formData.person_num" placeholder="参加课程的人数" type="number" />
      </view>
    </view>
  </view>
  <view class="h-150 mt-8"></view>
  <view class="bottom-wrap-16 bg-#fff border-top px-4">
    <view class="button-commit" @click="onSubmit">提交</view>
  </view>
</template>
<script setup>
import { navigate } from '@/common/util/uni';
import { numFormat } from '@/common/util/format';
import { showToast } from '@/common/util/uni';
import { getOfflineCourseDetail, postOfflineCourseApply } from '@/common/http/module/square';

const state = reactive({
  id: '',
  data: '',
  formData: {
    contact: '',
    company_name: '',
    mobile: '',
    person_num: ''
  }
})

function loadData() {
  getOfflineCourseDetail(state.id).then(res => {
    state.data = res.data
  })
}

function onSubmit() {
  if (!state.formData.contact) {
    showToast('请输入联系人')
    return
  }
  if (!state.formData.company_name) {
    showToast('请输入公司名')
    return
  }
  if (!state.formData.mobile) {
    showToast('请输入手机号')
    return
  }
  if (!state.formData.person_num) {
    showToast('请输入报名人数')
    return
  }

  const params = {
    ...state.formData,
    class_id: state.id
  }
  postOfflineCourseApply(params).then(() => {
    uni.redirectTo({
      url: '/package_square/pages/course/preview/success'
    })
  })
}

onLoad(options => {
  state.id = options.id
  loadData()
})
</script>

<style lang="scss" scoped>
.item-style {
  border-radius: 12rpx;
  background-color: #f6f6f6;
  padding: 32rpx;
}

.label-style {
  position: absolute;
  z-index: 1000;
  width: 120rpx;
  height: 40rpx;
  color: #fff;
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  background-color: #f4af22;
  border-radius: 12rpx 0px 12rpx 0rpx;
}

.border-top {
  border-top: 2rpx solid #eee;
}

.form-style {
  padding: 24rpx 16rpx 40rpx 16rpx;
  border-radius: 12rpx;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(51, 51, 51, 0.15);
}

.button-commit {
  height: 68rpx;
  border-radius: 5px;
  background-color: #F4AF22;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 28rpx;
}
</style>
